<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="t1" />
    <input type="text" id="t2" />
    <input type="button" value="加" onclick="f(1)" />
    <input type="button" value="减" onclick="f(2)" />
    <input type="button" value="乘" onclick="f(3)" />
    <input type="button" value="除" onclick="f(4)" />
    <h1>结果：<span></span></h1>

    <script>
      let num1 = document.querySelector("#t1");
      let num2 = document.querySelector("#t2");
      let s = document.querySelector("span");
      function f(num) {
        if (isNaN(num1.value) || isNaN(num2.value)) {
          s.innerText = "输入错误!";
          return;
        }
        switch (num) {
          case 1:
            s.innerText = num1.value * 1 + num2.value * 1;
            break;
          case 2:
            s.innerText = num1.value - num2.value;
            break;
          case 3:
            s.innerText = num1.value * num2.value;
            break;
          case 4:
            s.innerText = num1.value / num2.value;
        }
      }
    </script>
  </body>
</html>
